<template>
<view>
	<!-- 导航栏 -->
	<view class="header-fit-box" :style="'padding-top: '+ StatusBar +'px;'">
		<view class="header-fit" :style="{'height':(CustomBar-StatusBar) +'px'}">
			<image @click="back" class="back" src="@/static/home/subpage/back_black.png"></image>
			<view class="text">
				<text class="sup">纯碱2401</text>
				<view class="sub">
					<text>1842 3.95%</text>
				</view>
			</view>
		</view>
	</view>
	<view :style="{'height':CustomBar +'px'}" style="border-bottom:2rpx solid #F6F7F9;"></view>
	<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="group-box">
			<view class="item" v-for="(item,index) in 10">
				<view class="tl">14:29:03</view>
				<view class="tl">1843</view>
				<view class="tl">3</view>
				<view class="tl">0</view>
				<view class="tl" :class="{'col-green':index%2!=0}">多换</view>
			</view>
		</view>
	</mescroll-body>	
</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";	
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			
		};
	},
	methods:{
		back(){
			uni.navigateBack();
		},
		/*下拉刷新的回调 */
		downCallback() {
			this.mescroll.resetUpScroll()
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			setTimeout(()=>{
				this.mescroll.endSuccess(9,false);// 加载成功
			},1500)
		},
	}
}
</script>

<style lang="scss">
page{
	background: #F4F5F7;
}
.col-green{
	color: #33C45B !important;
}	
.header-fit-box{
	.header-fit{
		position: relative;
		.text{
			position: absolute;
			left:0;top:0;
			width:100%;
			height:100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.sup{
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
			.sub{
				display: flex;
				align-items: center;
				justify-content: center;
				& text{
					font-size: 20rpx;
					font-weight: bold;
					color: #FF3B30;
					padding-right:4rpx;
				}
				& image{
					width:28rpx;height:28rpx;
					margin-left:4rpx;
				}
			}
		}
		.item{
			& image{
				width:48rpx;height:48rpx;
				margin-left:16rpx;
			}
		}
		.item,.back{
			position: relative;
			z-index: 1;
		}
	}
}
.group-box{
	padding:24rpx 32rpx;
	.item{
		margin-top:24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.tl{
			font-size: 28rpx;
			font-weight: bold;
			color: #FF3B30;
		}
		.tl:first-child{
			font-weight: 400;
			color: rgba(0,0,0,0.8);
		}
	}
	.item:first-child{
		margin-top:0;
	}
}
</style>
